<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <!--viewport一定要加 user-scalable 值可以是yes|no或1|0 -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" />
    <!-- 禁止将数字转为号码 -->
    <meta name="format-detection" content="telephone=no" />
    <!-- 控制顶栏状态栏显示样式，可以为透明 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 添加一个网站图标，这样当你将网站添加到桌面图标时，会显示出来 -->
    <link rel="apple-touch-icon-precomposed" href="mobile_logo.png?v1" />
    <title></title>
    <!-- 重置样式 -->
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/detail.css">
    <!-- 将px转rem的公式代码 -->


<body>
    <!-- 网页内容 -->
    <!-- 記住写样式时將设计图量出的px除以100得到对应的rem 
  比如：10px==> 0.1rem
  -->
    <!-- 禁用了自动识别电话号码后，如何手动添加拨号识别功能 -->
    <!-- <a href="tel:15874106771">给我打电话</a> -->
    <!-- 隐藏导航栏 -->
    <nav class=" nav w100 flex flex-ac" id="nav">
        <a href="index.html" class=" ">
            <i class="fanhui"></i>
        </a>
        <div class="flex flex-ja nav1">
            <div class="jianb">商品</div>
            <div>评价</div>

            <div>推荐</div>
            <div>详情</div>
        </div>
        <a href="#" class=" mr10 ">
            <i class="nav-er"></i>
        </a>
    </nav>
    <!-- 放大镜 -->
    <section class="w100 max posir">
        <ul>
            <li><img src="img/2b121f19f1daa36a.jpg" alt=""></li>
            <li><img src="img/2524742073983f76.jpg" alt=""></li>
            <li><img src="img/ab0dd0b5bfbbce28.jpg" alt=""></li>
            <li><img src="img/fb407667e8681e18.jpg" alt=""></li>
            <li><img src="img/2502b6f80c937afb.jpg" alt=""></li>
            <li><img src="img/25b325ae02e34fac.jpg" alt=""></li>
            <li><img src="img/d9eaf51cec70d28d.jpg" alt=""></li>
        </ul>
        <div>
            <i></i>
        </div>
        <div>
            <i></i>
        </div>
        <span class="ye"><i>1</i>/7</span>
    </section>
    <!-- 秒杀时间 -->
    <section class="miaosha w100 flex flex-jb">
        <div class="white">
            <p>￥<i class="font24">255</i>.00</p>
            <p class="miaosha-qian font12 ">￥417.00</p>
        </div>
        <div class="mr5">
            <p class="red font12 tc">距离结束还剩</p>
            <div class="font12 mt5 " id="zhong">
                <em class="red">2天</em>
                <span class="white">00</span>
                <i class="red">:</i>
                <span class="white">00</span>
                <i class="red">:</i>
                <span class="white">00</span>
            </div>
        </div>
    </section>

    <!-- 收藏 -->

    <section class="shouchang w100">

        <div class="flex">
            <p class="fb ">吐火罗儿童套餐蜂蜜营养原蜜蜂农推荐无添加纯蜜健康组合2000g 荔枝蜜+椴树蜜+黑蜂蜜 再送增杷蜜</p>
            <a href="#" class="fb black">收藏</a>
        </div>
        <div class="ellipsis pt10 font12 " id="xiala">
            1.放心购物，正品保证，关注店铺，送运费险。2.下单送木勺，便携条蜜，30天无理由退货。3.健康儿童，深山农家，香醇稀少，套餐总4瓶
        </div>

    </section>
    <!-- 购物 -->
    <section class="gouwu w100 flex flex-jb flex-ac">
        <i></i>
        <p class="red font13 mr5">极速审核 · 24H发货 · 破损包退换</p>
        <i class="ioc"></i>
    </section>

    <!-- 优惠 -->
    <section class="youhui w100 flex flex-jb mt15">
        <div>优惠</div>
        <div class="youhui-xin pl15">
            <div class="font12 ">
                <span class="red bgRed zhuan mr5">每满三百减40</span>
                <span class="white zhuan">新用户专属</span>
            </div>
            <div class="mt10 flex flex-ac flex-jb zeng">
                <span class="font13">赠品</span>
                <span class="cutFont font13">购买立享1件赠品（条件：购买1件及以上，赠完即止）</span>
            </div>
            <div class="mt10 flex flex-ac flex-jb zeng">
                <span class="font13">赠品</span>
                <span class="cutFont font13">购买立享1件赠品（条件：购买1件及以上，赠完即止）</span>
            </div>
            <div class="mt10 flex flex-ac flex-jb zeng">
                <span class="font13">赠品</span>
                <span class="cutFont font13">购买立享1件赠品（条件：购买1件及以上，赠完即止）</span>
            </div>
        </div>
        <i class="ioc"></i>
    </section>
    <!-- 选择 -->
    <section class="xuanz mt15 w100">
        <article class="flex flex-ac flex-jb ptb15">
            <span class="font13 flex">
                <span class="fb ">已选</span>
                <div class="">一个</div>
            </span>

            <i class="ioc"></i>
        </article>
        <article class="flex flex-ac flex-jb ptb15">
            <span class="font13 flex">
                <span class="fb ">送至</span>
                <div class="">
                    <p>北京朝阳区三环到四环之间</p><span class="red">现货</span>
                    今日23:59前完成下单，24H发货，1月21日24:00前送达
                </div>
            </span>

            <i class="ioc"></i>
        </article>
        <article class="flex flex-ac flex-jb ptb15">
            <span class="font13 flex">
                <span class="fb ">运费</span>
                <div class="">
                    货到付款运费10元,在线支付免运费
                </div>
            </span>
        </article>

    </section>

    <!-- 售后 -->
    <section class="w100 shouhou flex flex-jb">
        <div>
            <span>商家发货&售后</span>
            <div>7天无理由退货(拆封不支持)</div>
            <span>货到付款</span>
            <span>送运险费</span>
            <span>特权保障</span>
        </div>
        <i class="ioc"></i>
    </section>

    <!-- 评价 -->
    <section class="pingjia w100 mt15 ">
        <article class="flex flex-jb ptb10">
            <div>
                <span class="fb font15">评价</span>
                <span class="font12">100+</span>
            </div>
            <div class="fb gray">
                好评度100%》
            </div>
        </article>

        <section>
            <article class="">
                <div class="flex flex-jb">
                    <div class="flex flex-ac">

                        <img src="img/6a645f3736343933363135366139626331353532393931363832333839_sma.jpg" alt=""
                            class="yonghu">

                        <span class="font12 ml5">冰糖雪梨来一碗</span>
                        <span class="xinxin ml5"><img src="img/1.png" alt=""></span>
                        <span class="xinxin"><img src="img/1.png" alt=""></span>
                        <span class="xinxin"><img src="img/1.png" alt=""></span>
                        <span class="xinxin"><img src="img/1.png" alt=""></span>
                        <span class="xinxin"><img src="img/1.png" alt=""></span>

                    </div>
                    <span class="gray font12">2020-08-02</span>
                </div>
                <div class="mtb15 font13">味道不错，尤其是黑蜂蜂蜜口感很好</div>
                <div class="pb15">
                    <img src="img/b8024efc10628d42.jpg" alt="" class="fengx">
                </div>
            </article>
            <article class="">
                <div class="flex flex-jb">
                    <div class="flex flex-ac">

                        <img src="img/6a645f3736343933363135366139626331353532393931363832333839_sma.jpg" alt=""
                            class="yonghu">

                        <span class="font12 ml5">冰糖雪梨来一碗</span>
                        <span class="xinxin ml5"><img src="img/1.png" alt=""></span>
                        <span class="xinxin"><img src="img/1.png" alt=""></span>
                        <span class="xinxin"><img src="img/1.png" alt=""></span>
                        <span class="xinxin"><img src="img/1.png" alt=""></span>
                        <span class="xinxin"><img src="img/1.png" alt=""></span>

                    </div>
                    <span class="gray font12">2020-08-02</span>
                </div>
                <div class="mtb15 font13">味道不错，尤其是黑蜂蜂蜜口感很好</div>

            </article>
        </section>
        <div class="tc">
            <button class="font12">查看全部评价</button>
        </div>

    </section>

    <!-- 问答 -->
    <section class="wenda w100 flex flex-jb">
        <div class="fb font15">问答</div>
        <div class="font12 gray ">暂无提问信息，去提问》</div>
    </section>

    <!-- 猜你喜欢    -->

    <section class="xihuan w100 mt15  clearfix">
        <div class="fb font15">猜你喜欢</div>
        <article class="mt15 posir hidden">
            <section class="xihuan-content clearfix">
                <section class="fl xihuan-content1">
                    <article class="flex flex-w flex-ja">
                        <div>
                            <img src="img/76fc530a7511eb3e.jpg" alt="">
                            <div class="font12 ellipsis">老滇凰 蜂王胎冻干片粉蜂王浆卵巢女性天然蜂胶蜂皇胎搭燕窝阿胶 300mg*60粒 一瓶装</div>
                            <div class="red fon12 fb mt5">￥499.00</div>
                        </div>
                        <div>
                            <img src="img/76fc530a7511eb3e.jpg" alt="">
                            <div class="font12 ellipsis">老滇凰 蜂王胎冻干片粉蜂王浆卵巢女性天然蜂胶蜂皇胎搭燕窝阿胶 300mg*60粒 一瓶装</div>
                            <div class="red fon12 fb mt5">￥499.00</div>
                        </div>
                        <div>
                            <img src="img/76fc530a7511eb3e.jpg" alt="">
                            <div class="font12 ellipsis">老滇凰 蜂王胎冻干片粉蜂王浆卵巢女性天然蜂胶蜂皇胎搭燕窝阿胶 300mg*60粒 一瓶装</div>
                            <div class="red fon12 fb mt5">￥499.00</div>
                        </div>
                        <div>
                            <img src="img/76fc530a7511eb3e.jpg" alt="">
                            <div class="font12 ellipsis">老滇凰 蜂王胎冻干片粉蜂王浆卵巢女性天然蜂胶蜂皇胎搭燕窝阿胶 300mg*60粒 一瓶装</div>
                            <div class="red fon12 fb mt5">￥499.00</div>
                        </div>
                        <div>
                            <img src="img/76fc530a7511eb3e.jpg" alt="">
                            <div class="font12 ellipsis">老滇凰 蜂王胎冻干片粉蜂王浆卵巢女性天然蜂胶蜂皇胎搭燕窝阿胶 300mg*60粒 一瓶装</div>
                            <div class="red fon12 fb mt5">￥499.00</div>
                        </div>
                        <div>
                            <img src="img/76fc530a7511eb3e.jpg" alt="">
                            <div class="font12 ellipsis">老滇凰 蜂王胎冻干片粉蜂王浆卵巢女性天然蜂胶蜂皇胎搭燕窝阿胶 300mg*60粒 一瓶装</div>
                            <div class="red fon12 fb mt5">￥499.00</div>
                        </div>
                    </article>
                </section>
                <section class="fl xihuan-content1">
                    <article class="flex flex-w flex-ja">

                        <div>
                            <img src="img/76fc530a7511eb3e.jpg" alt="">
                            <div class="font12 ellipsis">老滇凰 蜂王胎冻干片粉蜂王浆卵巢女性天然蜂胶蜂皇胎搭燕窝阿胶 300mg*60粒 一瓶装</div>
                            <div class="red fon12 fb mt5">￥499.00</div>
                        </div>
                        <div>
                            <img src="img/76fc530a7511eb3e.jpg" alt="">
                            <div class="font12 ellipsis">老滇凰 蜂王胎冻干片粉蜂王浆卵巢女性天然蜂胶蜂皇胎搭燕窝阿胶 300mg*60粒 一瓶装</div>
                            <div class="red fon12 fb mt5">￥499.00</div>
                        </div>
                        <div>
                            <img src="img/76fc530a7511eb3e.jpg" alt="">
                            <div class="font12 ellipsis">老滇凰 蜂王胎冻干片粉蜂王浆卵巢女性天然蜂胶蜂皇胎搭燕窝阿胶 300mg*60粒 一瓶装</div>
                            <div class="red fon12 fb mt5">￥499.00</div>
                        </div>
                        <div>
                            <img src="img/76fc530a7511eb3e.jpg" alt="">
                            <div class="font12 ellipsis">老滇凰 蜂王胎冻干片粉蜂王浆卵巢女性天然蜂胶蜂皇胎搭燕窝阿胶 300mg*60粒 一瓶装</div>
                            <div class="red fon12 fb mt5">￥499.00</div>
                        </div>
                        <div>
                            <img src="img/76fc530a7511eb3e.jpg" alt="">
                            <div class="font12 ellipsis">老滇凰 蜂王胎冻干片粉蜂王浆卵巢女性天然蜂胶蜂皇胎搭燕窝阿胶 300mg*60粒 一瓶装</div>
                            <div class="red fon12 fb mt5">￥499.00</div>
                        </div>
                    </article>
                </section>
                <section class="fl xihuan-content1">
                    <article class="flex flex-w flex-ja">

                        <div>
                            <img src="img/76fc530a7511eb3e.jpg" alt="">
                            <div class="font12 ellipsis">老滇凰 蜂王胎冻干片粉蜂王浆卵巢女性天然蜂胶蜂皇胎搭燕窝阿胶 300mg*60粒 一瓶装</div>
                            <div class="red fon12 fb mt5">￥499.00</div>
                        </div>
                        <div>
                            <img src="img/76fc530a7511eb3e.jpg" alt="">
                            <div class="font12 ellipsis">老滇凰 蜂王胎冻干片粉蜂王浆卵巢女性天然蜂胶蜂皇胎搭燕窝阿胶 300mg*60粒 一瓶装</div>
                            <div class="red fon12 fb mt5">￥499.00</div>
                        </div>
                        <div>
                            <img src="img/76fc530a7511eb3e.jpg" alt="">
                            <div class="font12 ellipsis">老滇凰 蜂王胎冻干片粉蜂王浆卵巢女性天然蜂胶蜂皇胎搭燕窝阿胶 300mg*60粒 一瓶装</div>
                            <div class="red fon12 fb mt5">￥499.00</div>
                        </div>
                    </article>
                </section>
                <section class="fl xihuan-content1">
                    <article class="flex flex-w flex-ja">


                        <div>
                            <img src="img/76fc530a7511eb3e.jpg" alt="">
                            <div class="font12 ellipsis">老滇凰 蜂王胎冻干片粉蜂王浆卵巢女性天然蜂胶蜂皇胎搭燕窝阿胶 300mg*60粒 一瓶装</div>
                            <div class="red fon12 fb mt5">￥499.00</div>
                        </div>
                    </article>
                </section>
            </section>
            <ol>
                <li class="bgRed"></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </article>
    </section>
    <!-- 商品介绍 -->
    <section class="jieshao w100 mt15 flex flex-ja">
        <a href="javascript:;" class="fb black jianb posir">商品介绍</a>
        <a href="javascript:;" class="black posir">规格参数</a>
        <a href="javascript:;" class="black posir">后勤保障</a>
    </section>

    <!-- 商品图片 -->
    <section class="sp-content w100 ">
        <img src="img/5b52aae2ae343eab.jpg" alt="">
        <img src="img/4c746db465fc9c28.jpg" alt="">
        <img src="img/21da1f59e85b1c89.jpg" alt="">
        <img src="img/8917bf42319e6775.jpg" alt="">
        <img src="img/14e35c48ac6bd59f.jpg" alt="">
        <img src="img/202e91ca362b0d12.jpg" alt="">
        <img src="img/870b5bfb3caf0df7.jpg" alt="">
        <img src="img/5f8c17f8812330c7.jpg" alt="">
        <img src="img/5f8c17f8812330c7.jpg" alt="">
        <img src="img/d74bd8be7a5b6244.jpg" alt="">
        <img src="img/cc5719ed3c04a8a4.jpg" alt="">
        <img src="img/db5c0bc1538ecb69.jpg" alt="">
        <img src="img/ece480f9b3fae039.jpg" alt="">

        <img src="img/672a4a6d39199b7d.jpg" alt="">
        <img src="img/8b00009f5a317ea0.jpg" alt="">
        <img src="img/dc21d4e5017da9e5.jpg" alt="">
        <img src="img/b2faecd1da917b5a.jpg" alt="">
    </section>

    <!-- 商品参数 -->
    <section class="canshu none">
        <article class="flex flex-jb flex-ac canshu-xian">
            <div></div>
            <div class="mlr10 font12 gray">商品参数</div>
            <div></div>
        </article>
        <article>
            <div>商品编号</div>
            <div>34558289118</div>
            <div class="fb">主体</div>
            <div>生产许可证</div>
            <div>sc</div>
            <div>产品标准号</div>
            <div>BG</div>
        </article>

    </section>
    <!-- 说明 -->
    <section class="shuoming none">
        <article class="flex flex-jb flex-ac canshu-xian">
            <div></div>
            <div class="mlr10 font12 gray">权利说明</div>
            <div></div>
        </article>
        <article class="font12 gray ">
            京东商城上的所有商品信息、
            客户评价、商品咨询、网友讨论
            等内容，是京东商城重要的经营
            资源，未经许可，禁止非法转载使用。
            <p>
                <b class="fb">注</b>
                本站商品信息均来自于厂商，其真实性、准确性和合法性由信息拥有者（厂商）负责。本站不提供任何保证，并不承担任何法律责任。
            </p>
        </article>
        <article class="flex flex-jb flex-ac canshu-xian">
            <div></div>
            <div class="mlr10 font12 gray">价格说明</div>
            <div></div>
        </article>
        <article class="font12 gray ">

            <p>
                <b class="fb">1、京东价：</b>
                京东价为商品的销售价，是您最终决定是否购买商品的依据。
            </p>
            <p>
                <b class="fb">2.划线价：</b>
                商品展示的划横线价格为参考价，该价格可能是品牌专柜标价、商品吊牌价或由品牌供应商提供的正品零售价（如厂商指导价、建议零售价等）或该商品在京东平台上曾经展示过的销售价；由于地区、时间的差异性和市场行情波动，品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致，该价格仅供您参考。
            </p>
            <p>
                <b class="fb">3.折扣：</b>
                如无特殊说明，折扣指销售商在原价、或划线价（如品牌专柜标价、商品吊牌价、厂商指导价、厂商建议零售价）等某一价格基础上计算出的优惠比例或优惠金额；如有疑问，您可在购买前联系销售商进行咨询。
            </p>
            <p>
                <b class="fb">4.异常问题：</b>
                商品促销信息以商品详情页“促销”栏中的信息为准；商品的具体售价以订单结算页价格为准；如您发现活动商品售价或促销信息有异常，建议购买前先联系销售商咨询。
            </p>
        </article>
    </section>
    <!-- 购物车 -->
    <footer class="w100 bgWhite flex  flex-ja flex-ac">
        <div class="font12 tc">
            <i class="i dian"></i>
            <p>店铺</p>
        </div>
        <div class="font12 tc">
            <i class="i kefu"></i>
            <p>客服</p>
        </div>
        <div class="font12 tc">
            <i class="i gouw"></i>
            <p> 购物车</p>
        </div>
        <div>
            <button class="bgretin white  font12">加入购物车</button>
            <button class="yellow white font12">立即购买</button>
        </div>
    </footer>
    <section class="bgcolor ptb30">
        <article class="logo"></article>
    </section>

    <!-- 弹窗 -->

    <section class="ze none">
        <article class="w100 ze-content bgWhite plr10 ">

            <div class="w100 ptb10 flex flex-jb">
                <div class="gray">我的足迹</div>
                <div class="red">
                    编辑
                    <a class="gray" id="guanbi">关闭</a>
                </div>

            </div>


            <div class="w100 mt10 flex flex-je list">
                <div class="zuji-img posir">
                    <div><img src="img/2b121f19f1daa36a.jpg" alt=""></div>
                    <div class="red font12 mt5">￥72.80</div>
                    <div></div>
                </div>
                <div class="zuji-img posir">
                    <div><img src="img/2b121f19f1daa36a.jpg" alt=""></div>
                    <div class="red font12 mt5">￥72.80</div>
                    <div></div>
                </div>
                <div class="zuji-img posir">
                    <div><img src="img/2b121f19f1daa36a.jpg" alt=""></div>
                    <div class="red font12 mt5">￥72.80</div>
                    <div></div>
                </div>
            </div>

            <a href="javascript:;" class="gray chakan">查看更多足迹》</a>
        </article>
    </section>
    <!-- 图片 -->
    <div class="tan "><img src="img/2b121f19f1daa36a.jpg" alt=""></div>
    <script src="js/detail.js"></script>

    <script>


        var w = document.documentElement.getBoundingClientRect().width;
        //7.5是根据设计图的大小除以100，需要按照你的实际设计图换算
        var bili = (w / 3.2);
        document.documentElement.style.fontSize = bili + "px";

    </script>
</body>

</html>